<template>
  <div class="system-role-container-information-index">
    <el-card shadow="hover" class="mb10  ">
      <div class="system-user-search-information-index">
        <div>
          <el-form :model="paramSearch" label-width="150px">

            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="选择时间：">
                <el-date-picker
                    v-model="param.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    value-format="YYYY-MM-DD"
                    end-placeholder="结束时间"
                />
<!--                <el-date-picker-->
<!--                    v-model="param.start"-->
<!--                    type="date"-->
<!--                    placeholder="请输入开始时间"-->
<!--                    value-format="YYYY/MM/DD"-->
<!--                    style="width: 180px"-->
<!--                />-->
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="发布范围：">
                <el-input size="small" placeholder="请输入发布范围" v-model="param.educationType"
                          style="max-width: 180px" class="ml10">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
              <el-form-item label="状态：">
                <el-select v-model="param.status" placeholder="请选择状态" size="small" style="width: 180px"
                           class="ml10">
                  <el-option label="未发布" value="0"></el-option>
                  <el-option label="已发布" value="1"></el-option>

                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
                <div style="display: flex;justify-content: end;">
                    <el-button class="ml10 btn_bgc" type="primary" @click="search"> 查询</el-button>
                    <el-button class="ml10" @click="searchClear">重置 </el-button>
                </div>
            </div>
        </el-card>
        <el-card shadow="hover">
          <template #header>
            <div style="display: flex; justify-content: end">
              <el-button style="margin: 10px 0; transform: translateX(2px);" class="ml10 btn_bgc" type="primary" @click="onOpenAddRole"> 新增</el-button>
            </div>

          </template>
          <el-table
              :data="tableData.data"
              style="width: 100%"
              height="calc(100vh - 180px )"
              :header-cell-style="{ background: '#EEEEEE', }"
          >
            <el-table-column prop="source" label="发布人" align="center">
              <template #default="scope">
                <span v-if="scope.row.source===0">中心社</span>
                <span v-if="scope.row.source===1">分社</span>
              </template>
            </el-table-column>
            <el-table-column prop="schoolNames" label="发布范围" align="center">
              <template #default="scope">
                <p class="over-size-p">{{scope.row.schoolNames}}</p>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="sort" label="所属高校"></el-table-column> -->
            <el-table-column prop="content" label="发布内容" align="center">
              <template #default="scope">
                <p class="over-size-p">{{scope.row.content}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="publishTime" label="发布时间" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status===1">已发布</el-tag>
                <el-tag type="danger" v-if="scope.row.status===0">未发布</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button size="mini" type="primary" @click="onOpenLook(scope.row)">查看</el-button>
                <el-button size="mini" type="success" @click="onOpenEditRole(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="onRowDel(scope.row)">撤回</el-button>
              </template>
            </el-table-column>
          </el-table>

            <el-pagination
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                    class="mt15"
                    :pager-count="5"
                    :page-sizes="[15, 30, 45]"
                    v-model:current-page="param.current"
                    background
                    v-model:page-size="param.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total"
            >
            </el-pagination>
        </el-card>
        <AddRole ref="addRoleRef" @update="add" />
        <EditRole ref="editRoleRef" @update="Edit"/>
        <LookRole ref="lookRoleRef" />
    </div>
</template>
<script lang="ts">
import {toRefs, reactive, onMounted, ref} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import AddRole from './component/addRole.vue';
import EditRole from './component/editRole.vue';
import LookRole from './component/LookRole.vue';
import {noticeGet, noticeAdd, deleteNot, noticeEdit} from '../../api/information/index'
import {userEdit} from "/@/api/home";

export default {
  name: 'studentIndex',
  components: {AddRole, EditRole, LookRole},
  setup() {
    const addRoleRef = ref();
    const editRoleRef = ref();
    const lookRoleRef = ref();
    const state: any = reactive({
      tableData: {
        data: [],
        total: 0,
        loading: false,
      },
      param: {
        start: '',
        end: '',
        time: '',
        status: '',
        educationType: '',
        current: 1,
        size: 15
      },


    });
    // 初始化表格数据
    const initTableData = async () => {
      const res = await noticeGet(state.param)
      state.tableData.data = res.data.records;
      state.tableData.total = res.data.total;
    };
    // 打开新增角色弹窗
    const onOpenAddRole = () => {
      addRoleRef.value.openDialog();
    };
    // 打开修改角色弹窗
    const onOpenEditRole = (row: Object) => {
      editRoleRef.value.openDialog(row);
    };
    // 查看角色弹窗
    const onOpenLook = (row: Object) => {
      lookRoleRef.value.openDialog(row);
    };
    const add = async (oldRow: any) => {
      const res = await noticeAdd(oldRow);
      if (res.code === 200) {
        ElMessage.success('添加成功');
        addRoleRef.value.closeDialog();
        initTableData();
      }
    };
    const Edit = async (oldRow: any) => {
      console.log(oldRow, 222222);
      const res = await noticeEdit(oldRow);
      if (res.code === 200) {
        ElMessage.success('修改成功');
        editRoleRef.value.closeDialog();
        initTableData();
      }
    }
    // 删除角色
    const onRowDel = (row: any) => {
      console.log(row, '222')
      ElMessageBox.confirm(`此操作将更改为未发布状态;是否继续?`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            const params = {
              id: row.id
            }
            deleteNot(params).then((res: any) => {
              if (res.code === 200) {
                ElMessage.success('撤回成功');
                initTableData()
              }
            })
          })
          .catch(() => {
          });
    };
    // 分页改变
    const onHandleSizeChange = (val: number) => {
      state.param.size = val;
      initTableData()
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
      state.param.current = val;
      initTableData()
    };
    //查询
    const search = async () => {
      state.param.start = state.param.time[0];
      state.param.end = state.param.time[1];
      const {start, end, status, educationType, curren, size} = state.param;
      let requestData = {start, end, status, educationType, curren, size}

      const res = await noticeGet(requestData)
      state.tableData.data = res.data.records;
      state.tableData.total = res.data.total;

    }
    const searchClear = async () => {
      state.param = {}
      const res = await noticeGet(state.param)
      state.tableData.data = res.data.records;
      state.tableData.total = res.data.total;
      state.param.size = 15
    }


    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    return {
      addRoleRef,
      editRoleRef,
      lookRoleRef,
      onOpenLook,
      onOpenAddRole,
      onOpenEditRole,
      onRowDel,
      onHandleSizeChange,
      onHandleCurrentChange,
      search,
      searchClear,
      add,
      Edit,
      ...toRefs(state),
    };
  },
};
</script>
<style lang="scss">
.over-size-p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.system-user-search-information-index {
  display: flex;
  flex-direction: column;

  // justify-content: end;
  .btn_bgc {
    background: #D84436;
    border: none;

  }

  ::v-deep .el-input__inner {
    width: 200px;
  }
}
.system-role-container-information-index {
  .el-card__header {
    height: auto!important;
    min-height: 45px!important;
  }
}
</style>
